<template>
  <view>
    <view class="my-config">

      <view class="config-item"
            @click="selectSex('male')"
            :class="{ active: selectedSex === 'male' }">
        <view>男</view>
        <view v-if="selectedSex === 'male'" class="checkmark">✔</view>
      </view>

      <view class="config-item"
            @click="selectSex('female')"
            :class="{ active: selectedSex === 'female' }">
        <view>女</view>
        <view v-if="selectedSex === 'female'" class="checkmark">✔</view>
      </view>

      <view class="save" @click="logout">完成</view>

    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      selectedSex: '' // 保存当前选择的性别
    };
  },
  methods: {
    selectSex(sex) {
      this.selectedSex = sex; // 更新选中状态
    },
    logout(){
      const sexLabel = this.selectedSex === 'male' ? '男' : '女';
      uni.setStorageSync('userSex', sexLabel); // 保存到本地
      uni.navigateBack({
        delta: 1,
        success: () => {
          uni.$emit('update-sex', sexLabel);
        }
      });
    }
  },
}
</script>

<style lang="scss">
.config-item{
  background-color: white;
  display: flex;
  justify-content: space-between;
  padding: 20rpx 0 20rpx 20rpx;
  border-bottom: 2rpx solid lightgray;
  margin-top: 5rpx;
  font-weight: bold;
}
.checkmark {
  margin-right: 20rpx;
  color: green; /* 打勾颜色 */
  font-size: 30rpx;
  font-weight: bold;
}
.save{
  background-color: rgba(0, 255, 21, 0.44);
  width: 100%;
  line-height: 80rpx;
  text-align: center;
  margin-top: 15rpx;
}
</style>
